<template>
  <a-modal
    v-if="open"
    title="视频库"
    ok-text="确认"
    cancel-text="取消"
    centered
    :closable="false"
    :open="open"
    width="800"
    :maskClosable="false"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-row>
      <div class="float-left mt-24">
        <UploadVideoSub
          label="视频"
          :defaultCheckedList="internalDefaultKeys"
          :open="internalRefresh"
          @selected="handleSelected"
        />
      </div>
    </a-row>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { Modal as AModal, Row as ARow } from 'ant-design-vue';
import UploadVideoSub from './upload-video-sub.vue';

interface Props {
  defaultKeys: any[];
  open: boolean;
  onSelected: (arr: any[], videos: any[]) => void;
  onCancel: () => void;
}

interface SelVideosModel {
  name: string;
  rid: number;
  type: string;
  duration: number;
}

const props = defineProps<Props>();

const selectKeys = ref<number[]>([]);
const selectVideos = ref<SelVideosModel[]>([]);

// 初始化默认选中状态
watch(() => props.open, (newVal) => {
  if (newVal) {
    selectKeys.value = [...props.defaultKeys];
  } else {
    selectKeys.value = [];
    selectVideos.value = [];
  }
}, { immediate: true });

// 使用computed属性来响应open的变化
const internalRefresh = computed(() => props.open);
const internalDefaultKeys = computed(() => selectKeys.value);

// 取消处理
const handleCancel = () => {
  selectKeys.value = [];
  selectVideos.value = [];
  props.onCancel();
};

// 确认处理
const handleOk = () => {
  props.onSelected(selectKeys.value, selectVideos.value);
  selectKeys.value = [];
  selectVideos.value = [];
};

// 视频选择处理
const handleSelected = (arr: any[], videos: any[]) => {
  selectKeys.value = arr;
  selectVideos.value = videos;
};
</script>

<style scoped>

</style>